<template>
  <div class="servive_detail">
    <van-sticky>
      <van-nav-bar title="服务名称" v-if="!flag" left-arrow @click-left="back">
        <template #right>
          <!-- <van-icon name="share" @click="showShare = true" size="18" /> -->
          <van-icon name="share" size="18" @click='sharefun' />
          <!-- <router-link :to="{path:`/newshare/${shopid}/${detail.currentPrice}`}">
			
		  </router-link> -->
        </template>
      </van-nav-bar>
      <van-nav-bar title="服务名称" v-if="flag" left-arrow @click-left="gohome">
        <template #right>
          <!-- <van-icon name="share" @click="showShare = true" size="18" /> -->
          <van-icon name="share" size="18" @click='sharefun' />
          <!-- <router-link :to="{path:`/newshare/${shopid}/${detail.currentPrice}`}">
	  			
	  		  </router-link> -->
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="banner">
      <swiper :options="bannerOption" ref="bannerSwiper">
        <swiper-slide v-for="(slide,index) in detail.fileUrlList" :key="index">
          <!-- {{index}} -->
          <img :src="slide" alt="" style="width:100%;height: 100%;">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination" v-if="slides.length > 1"></div>
      </swiper>
    </div>

    <div class="infor">
      <div class="row-between-center">
        <strong class="name">{{detail.goodsName}}</strong>
        <span class="salenum">累计销售<span>{{detail.sellNum}}</span></span>
      </div>
      <div class="price">
        {{detail.currentPrice}} <small>{{detail.originalPrice}}</small>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="服务地区" :value="detail.regionName" />
      <!-- <van-cell title="服务项目" @click="showLevel = true" :value="detail.serviceName" /> -->
	  <van-cell @click="showLevel = true" :value="detail.serviceName" is-link>
	    <!-- 使用 title 插槽来自定义标题 -->
	    <template slot="title">
	      <span class="custom-title">服务项目</span>
	      <van-tag type="danger">可选择</van-tag>
	    </template>
	  </van-cell>
      <van-cell title="服务保障" :value="detail.secLabel" />
    </van-cell-group>

    <div class="intreduce">
      <h4 class="title">服务介绍</h4>
      <p class="text htmlstyle" v-html="detail.introduce">一般说来，在进行技术开发、新产品研制过程中取得的成果，因其技术水平较高，都应申请发明专利。</p>

    </div>

    <div class="process">
      <h4 class="title">服务流程</h4>
      <img :src="detail.processImgUrl" alt="">
    </div>

    <div class="need intreduce">
      <h4 class="title">所需资料</h4>
      <p class="text htmlstyle" v-html="detail.materials">申请人的姓名或名称（全称）、地址、邮编</p>
    </div>

    <div class="custum_say">
      <div class="title row-between-center">
        <strong>用户评价 ({{detail.goodEvaluationNum}})</strong>
        <router-link tag="span" class="row-between-center" :to="{ path: `/evaluate/${serverid}/${this.$route.params.type}` }">全部
          <van-icon name="arrow" />
        </router-link>
      </div>

      <div class="list van-hairline--bottom" v-for="(item,index) in detail.goodEvaluations" :key="index">
        <div class="row-between-center">
          <div class="user row-between-center">
            <div class="head" :style="{backgroundImage:`url(${item.userHead})`}"></div>
            <div class="text">
              <p class="name">{{item.userName}}</p>
              <van-rate v-model="item.average" readonly />
            </div>
          </div>
          <span class="time">{{item.insertTime}}</span>
        </div>
        <div class="tags">
          <span class="tag">服务态度<i></i>{{starText[item.attitude]}}</span>
          <span class="tag">服务质量<i></i>{{starText[item.quality]}}</span>
          <span class="tag">办理速度<i></i>{{starText[item.speed]}}</span>
        </div>
        <p class="text">{{item.evaContent}}</p>
      </div>
    </div>

    <div class="need intreduce">
      <h4 class="title">服务保障</h4>
      <p class="text htmlstyle" v-html="detail.secLabel">明码标价，公开透明</p>
    </div>

    <div class="question">
      <h4 class="title">常见问题</h4>
      <div class="list htmlstyle" v-html="detail.question">
        <h6 class="qs">Q:客户至上，服务一定做到客户满意为止</h6>
        <div class="conetnt">
          <span>A:</span>
          <p>人们通过研究开发出来的关于各种新产品、新材料、新物质等的技术方案。专利法上的产品，可以是一个独立、完整的产品，也可以是一个设备或仪器中的零部件。其主内容包括：制造品，如机器、设备以及各种用品材料，如化学物质、组合物等具有新用途的产品。</p>
        </div>
      </div>

    </div>
    <!-- <van-divider>——已到底了——</van-divider> -->
    <p class="no_more">——已到底了——</p>

    <div class="footer_bar">
      <router-link tag="span" :to="{path:`/online/${this.$route.params.id}`}" class="left">咨询</router-link>
      <router-link tag="span" :to="{ path: `/orderconfirm/${this.$route.params.type}/${detail.id}` }" class="right">下一步</router-link>
    </div>

    <!-- 认证等级 -->
    <van-popup v-model="showLevel" position="bottom">
      <van-picker show-toolbar :columns="level" @confirm="onConfirm(...arguments,'level')" @cancel="showLevel = false" />
    </van-popup>
    <share-pic v-if="showShare" :detail="detail" @close="showShare = false"></share-pic>
  </div>

</template>

<script>
import api from "api/api"
export default {
  data () {
    return {
      star: 5,
      detail: {},
      bannerOption: {
        autoplay: false,
        slidesPerView: 'auto',
        loop: true,
        spaceBetween: 8,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      starText: ['非常差', '很差', '一般', '还行', '好', '很好'],
      activeIndex: 0,
      fadeOut: false,
      slides: [{
        pictureUrl: require('../../assets/img/home/banner.png'),
        goodsId: 0
      }
      ],
      projectList: [],
      showLevel: false,
      level: [],
      showShare: false,
      serversId: '',
      serverid: '',
      shopid: '',
      shopurl: '',
      flag: ''
    }
  },
  computed: {
    project: function () {
      var arr = this.projectList.filter(val => {
        return val.id == this.$route.params.id
      })
      return arr[0] || {}
    }
  },
  created () {
    this.shopid = this.$route.params.id,
      this.shopurl = window.location.href

    this.getData()
    // this.share()


  },
  methods: {
    share () {
      var str = window.location.href
      this.flag = str.search('share=') != -1
      if (str.search('share=') != -1) {
        var sharecode = str.split('share=')[1]
        api.sharecallback({ data: sharecode }).then(res => {

        })
      }
    },
    gohome () {
      this.$router.push('/')
    },
    sharefun () {
      console.log('555')
      this.$router.push({ name: 'newshare', params: { id: this.shopid, money: this.detail.currentPrice, url: this.shopurl } })
      // /newshare/${shopid}/${detail.currentPrice}
    },
    getData () {
      var type = this.$route.params.type
      // console.log(type)
      //     if (type == 'package') {
      // api.packageDeatail({
      //   data: {
      //     id: this.$route.params.id
      //   }
      // }).then(res => {
      //   console.log('taocan',res)
      //   var detail = res.data
      //   // detail.goodsSerList.forEach(element => {
      //   //   element.average = (element.attitude + element.quality + element.speed) / 3
      //   // });
      //   this.detail = detail
      // })
      //     } else {
      console.log(this.$route.params)
      // return;
      api.infoByinfo({
        data: {
          id: this.$route.params.id,
        }
      }).then(res => {
        var detail = res.data
        detail.goodEvaluations.forEach(element => {
          element.average = (element.attitude + element.quality + element.speed) / 3
        });
        this.detail = detail
        console.log('detail', this.detail)
        this.serverid = this.detail.id
        this.getserve()
      })
      // }


    },
    getserve () {
      // console.log('id',this.$route.params.id)
      api.projectList({
        data: {
          id: this.$route.params.id,
        }
      }).then(res => {
        console.log('newdata', res.data)
        this.projectList = res.data
        this.projectList.forEach(v => {
          v.text = v.serviceName
        })
        this.level = this.projectList
        this.detail = Object.assign({}, this.detail, this.projectList[0])
        console.log('服务', this.detail)
      })
    },
    back () {
      window.history.go(-1)
    },
    onConfirm (val) {
      this.showLevel = false
      console.log(val)
      this.detail = Object.assign({}, this.detail, val)
      console.log(this.detail)
    }
  }
}
</script>

<style lang="scss">
ul li {
  list-style: none;
}

.servive_detail {
  background-color: #f5f5f5;
  text-align: left;
  .infor {
    font-size: 0.24rem;
    padding: 0.27rem;
    background-color: #fff;
    margin-bottom: 0.16rem;
    .name {
      font-size: 0.36rem;
    }
    .salenum {
      font-size: 0.22upx;
      color: #999;
      span {
        color: #ff344c;
      }
    }
    .price {
      font-size: 0.32rem;
      color: #ff344c;
      margin-bottom: 0.2rem;
      small {
        color: #999;
        text-decoration-line: line-through;
      }
    }
  }
  .intreduce {
    padding: 0.3rem;
    background-color: #fff;
    margin: 0.17rem 0;
    .title {
      font-size: 0.32rem;
    }
    .text {
      font-size: 0.28rem;
      color: #333;
      position: relative;
      padding-left: 0.3rem;
      margin-top: 0.37rem;
      &::before {
        content: "";
        position: absolute;
        left: 0rem;
        top: 0.15rem;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background-color: #000;
      }
    }
  }
  .process {
    background-color: #fff;
    padding: 0.3rem;
    .title {
      font-size: 0.32rem;
    }
    img {
      width: 100%;
      margin-top: 0.28rem;
    }
  }

  .custum_say {
    background-color: #fff;
    padding: 0.3rem;
    .title {
      font-size: 0.32rem;
      margin-bottom: 0.05rem;
      span {
        color: #348aff;
      }
    }
    .list {
      padding: 0.27rem 0;
      .user {
        .head {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          margin-right: 0.2rem;
          background-size: cover;
        }
        .name {
          font-size: 0.28rem;
        }
        .van-rate__icon {
          font-size: 0.28rem;
        }
      }
      .time {
        font-size: 0.22rem;
        color: #999;
      }
      .tags {
        display: flex;
        flex-wrap: wrap;
        padding: 0.2rem 0;
        .tag {
          padding: 0.11rem;
          font-size: 0.24rem;
          border: 0.01rem solid rgba(153, 153, 153, 1);
          border-radius: 0.03rem;
          margin-right: 0.13rem;
          display: flex;
          align-items: center;
          i {
            margin: 0 0.11rem;
            display: inline-block;
            height: 0.23rem;
            width: 1px;
            background-color: #000;
          }
        }
      }
      .text {
        font-size: 0.24rem;
      }
    }
  }
  .question {
    background-color: #fff;
    padding: 0.3rem;
    font-size: 0.28rem;
    .title {
      font-size: 0.32rem;
      margin-bottom: 0.05rem;
    }
    .list {
      margin-top: 0.21rem;
      .qs {
        font-size: 0.28rem;
        color: #333;
        font-weight: normal;
      }
      .conetnt {
        position: relative;
        font-size: 0.24rem;
        color: #999;
        margin-top: 0.11rem;
        span {
          position: absolute;
          left: 0;
        }
        p {
          padding-left: 0.3rem;
        }
      }
    }
  }
  .no_more {
    font-size: 0.22rem;
    color: #999;
    text-align: center;
    padding: 0.3rem 0 3rem 0;
  }
  .footer_bar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    line-height: 0.98rem;
    font-size: 0.36rem;
    text-align: center;
    .left {
      width: 50%;
      color: #ff8a34;
      background-color: #fff;
    }
    .right {
      width: 50%;
      color: #ffffff;
      background: linear-gradient(
        96deg,
        rgba(72, 143, 240, 1),
        rgba(51, 130, 239, 1)
      );
    }
  }
}
</style>